---
import { Code } from "astro:components";
// import { Code } from '@astrojs/starlight/components';


export interface Props {
  title: string;
  tagline: string;
  actions?: Array<{
    text: string;
    link: string;
    variant?: "primary" | "secondary";
    icon?: string;
  }>;
  code?: boolean;
}

const { data } = Astro.locals.starlightRoute.entry;
const { title = data?.title, tagline, actions = [], code = true } = data?.hero || {};

const codeContent = `const database = await Database("my-database");

const website = await Worker("website", {
  bindings: {
    DB: database,
  },
});

const price = await Price("basic-license", {
  currency: "usd",
  unitAmount: 2999, // $29.99
  product: "prod_xyz"
});`;

---

<div class="hero">
  <div class="hero-content">
    <div class="hero-text">
      <h1 class="hero-title">{title}</h1>
      <p class="hero-tagline">{tagline}</p>

      {
        actions.length > 0 && (
          <div class="hero-actions">
            {actions.map((action: any) => (
              <a
                href={action.link}
                class={`hero-button ${action.variant || "primary"}`}
                {...(action.link.startsWith("http")
                  ? { target: "_blank", rel: "noopener noreferrer" }
                  : {})}
              >
                {action.text}
                {action.icon && <span class={`icon ${action.icon}`} />}
              </a>
            ))}
          </div>
        )
      }
    </div>

    {code && (
    <div class="hero-visual">
      <div class="code-window">
        <div class="code-header">
          <div class="code-dots">
            <span class="dot red"></span>
            <span class="dot yellow"></span>
            <span class="dot green"></span>
          </div>
          <span class="code-title">alchemy.run.ts</span>
        </div>
        <div class="code-content">
          <div id="code-block-light" class="code-theme light-theme">
            <!-- <Code code={codeContent} lang="typescript" theme="catppuccin-latte" /> -->
            <Code code={codeContent} lang="typescript" theme="github-light" />
          </div>
          <div id="code-block-dark" class="code-theme dark-theme">
            <Code code={codeContent} lang="typescript" theme="github-dark-dimmed" />
          </div>
          </div>
        </div>
      </div>
    )}
  </div>
</div>

<style>
  /* Hero-specific CSS variables */
  :root {
    /* Hero Section Colors - Dark Theme */
    --hero-text-primary: #ffffff;
    --hero-text-secondary: #E5E7EB;    /* Keep subtitle white */
    --hero-title-accent: #A78BFA;      /* Purple only for title gradient */
    --hero-code-bg: #121212;
    --hero-code-border: rgba(255, 255, 255, 0.2);
    --hero-code-text: #e5e7eb;
    --hero-code-title: #d1d5db;
    --hero-dot-color: #4B5563;
    --hero-shadow: rgba(0, 0, 0, 0.3);
    --hero-accent: #F3F4F6;            /* Keep buttons white */
    --hero-glow-color: rgba(167, 139, 250, 0.1); /* Subtle purple glow for dark theme */
    --hero-noise-opacity: 0.4;
  }

  :root[data-theme="light"] {
    /* Hero Section Colors - Light Theme */
    --hero-text-primary: #6B46C1;      /* Medium purple - clearly purple but not too bright */
    --hero-text-secondary: #374151;    /* Keep subtitle dark gray */
    --hero-title-accent: #5B21B6;      /* Deeper purple for title */
    --hero-code-bg: #ffffff;
    --hero-code-border: rgba(0, 0, 0, 0.15);
    --hero-code-text: #374151;
    --hero-code-title: #4b5563;
    --hero-dot-color: #D1D5DB;
    --hero-shadow: rgba(0, 0, 0, 0.1);
    --hero-accent: #111827;            /* Keep buttons dark */
    --hero-glow-color: rgba(147, 51, 234, 0.15); /* Brighter purple glow for light theme */
    --hero-noise-opacity: 0.3;
  }

  /* Global page background override - only for pages with hero class */
  :global(body:has(.hero)) {
    background: 
        radial-gradient(
            circle at 50% 50%,
            var(--hero-glow-color) 0%,
            transparent 85%
        ),
        linear-gradient(
            135deg,
            var(--sl-color-bg) 0%,
            var(--sl-color-bg-nav) 100%
        );
    min-height: 100vh;
    position: relative;
  }

  :global(body:has(.hero))::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: var(--hero-noise-opacity);
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    mix-blend-mode: overlay;
  }

  .hero {
    padding: 0rem 2rem;
    text-align: center;
    background: transparent;
    font-family: "IBM Plex Serif";
    min-height: clamp(500px, calc(90vh - var(--sl-nav-height, 4rem)), 800px);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .hero-content {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    gap: 3rem;
    align-items: center;
  }

  .hero-title {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 1rem 0;
    text-align: center;
    color: var(--hero-text-primary);
  }

  :root[data-theme="dark"] .hero-title {
    /* Dark mode gradient */
    background: linear-gradient(
      135deg,
      var(--sl-color-text) 0%,
      var(--hero-title-accent) 100%
    );
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .hero-tagline {
    font-size: clamp(1.1rem, 2.5vw, 1.5rem);
    color: var(--hero-text-secondary);
    margin: 0 auto 2rem auto;
    padding: 0;
    max-width: 600px;
    line-height: 1.4;
    font-family: "IBM Plex Sans", sans-serif;
  }

  .hero-visual {
    display: flex;
    justify-content: center;
    margin: 2rem 0;
  }

  .code-window {
    background: var(--hero-code-bg);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px var(--hero-shadow);
    width: 100%;
    max-width: 600px;
    border: 1px solid var(--hero-code-border);
  }

  .code-header {
    background: var(--hero-code-bg);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid var(--hero-code-border);
  }

  .code-dots {
    display: flex;
    gap: 6px;
  }

  .dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--hero-dot-color);
  }

  .code-title {
    color: var(--hero-code-title);
    font-size: 14px;
    font-weight: 500;
    font-family: "Consolas", "IBM Plex Mono", "Monaco", "Menlo", monospace;
  }

  .code-content {
    padding: 24px;
    font-family: "IBM Plex Mono", "Monaco", "Menlo", "Consolas", monospace;
    font-size: 14px;
    line-height: 1.6;
    overflow-x: auto;
  }

  .code-content pre {
    margin: 0;
    background: transparent !important;
    padding: 0;
  }

  .code-content code {
    background: transparent !important;
    padding: 0;
    font-size: inherit;
  }

  /* Theme switching */
  .code-theme {
    display: none;
  }

  .code-theme.active {
    display: block;
  }

  /* Default to dark theme */
  .dark-theme {
    display: block;
  }

  /* Show light theme when manually set to light */
  :root[data-theme="light"] .light-theme {
    display: block;
  }

  :root[data-theme="light"] .dark-theme {
    display: none;
  }

  .hero-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 1.5rem;
    
  }

  .hero-button {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    font-weight: 500;
    font-size: 0.875rem;
    text-decoration: none;
    transition: all 0.2s ease;
    border: 2px solid transparent;
  }

  .hero-button.primary {
    background: var(--hero-accent);
    color: var(--sl-color-bg);
  }

  .hero-button.primary:hover {
    background: color-mix(in srgb, var(--hero-accent) 80%, white 20%);
    color: var(--sl-color-bg);
    transform: scale(1.05);
    box-shadow: 0 0 0 2px transparent;
  }

  .hero-button.secondary {
    background: transparent;
    color: var(--sl-color-text);
    border-color: var(--sl-color-gray-5);
  }

  .hero-button.secondary:hover {
    background: var(--sl-color-gray-6);
    transform: scale(1.05);
    box-shadow: 0 0 0 2px transparent;
  }

  .hero-button.minimal {
    color: var(--hero-accent);
    font-weight: bold;
  }

  .hero-button.minimal:hover {
    color: color-mix(in srgb, var(--hero-accent) 80%, white 40%);
  }

  /* Responsive Design */
  @media (min-width: 768px) {
    .hero-content {
      grid-template-columns: 1fr 1fr;
      text-align: left;
      gap: 3.5rem;
    }

    .hero-title,
    .hero-tagline {
      text-align: left;
    }

    .hero-tagline {
      margin: 0 0 2rem 0;
      max-width: none;
    }

    .hero-actions {
      justify-content: flex-start;
    }
  }

  @media (max-width: 767px) {
    .hero {
      padding: 2rem 1rem;
      min-height: clamp(400px, calc(85vh - var(--sl-nav-height, 4rem)), 600px);
    }

    .hero-content {
      display: block !important; /* Override grid */
      position: relative;
    }

    /* Position text independently */
    .hero-text {
      position: relative;
      width: 100%;
      margin: 0 auto;
      text-align: center;
      transform: translateX(0);
      left: 0;
      right: 0;
    }

    .hero-title {
      text-align: center;
      width: 100%;
      margin-left: auto;
      margin-right: auto;
    }

    .hero-tagline {
      text-align: center;
      width: 100%;
      margin-left: auto;
      margin-right: auto;
    }

    .hero-actions {
      justify-content: center;
      width: 100%;
      margin-left: auto;
      margin-right: auto;
    }

    /* Keep code window independent and allow overflow */
    .hero-visual {
      position: relative;
      width: 100vw;
      margin-left: -1rem; /* Counter the hero padding */
      margin-right: -1rem;
      padding: 0 1rem;
      overflow-x: visible;
    }

    .code-window {
      max-width: none;
    }

    .astro-code {
      text-align: left;
    }

    .code-content {
      font-size: 12px;
      padding: 16px;
    }
  }
</style>
